<script setup lang="ts">


import {reactive,ref} from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { loginApi} from './api/UserApi.ts'
import {digElMessage} from "../common/Message.ts";
import {useRouter} from 'vue-router'

import {userLoginCheckFuntion} from "../common/user/UserLogin.ts";


let router=useRouter();
interface LoginInfoType{
  username:string,
  password:string
}
const ruleFormRef = ref<FormInstance>()
let userInfo=reactive<LoginInfoType>({
    username:"admin",
    password:"123456"
})



const rules = reactive<FormRules<LoginInfoType>>({
      username:[ { required: true, message: '请输入账号/邮箱/用户名', trigger: 'blur' }],
      password:[{ required: true, message: '请输入密码', trigger: 'blur' }]
})


const userLogin=async (formEl: FormInstance | undefined)=>{

  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await userLoginCheckFuntion(userInfo).then(async data => {
        await loginApi(data).then(res => {

          if(res.code=='00000'){
            localStorage.setItem("token",res.data)
            digElMessage("登录成功即将跳转", "success", 1000)
            setTimeout(() => {
              router.push("/index")
            }, 1000)

          }

        })

      })
    }}

  )}

</script>

<template>
  <div class="user_login">

       <div class="user_login_head">

            <el-col class="user_login_head_font">
                <div class="user_login_head_font_left">
                   <span style="font-size: 30px;font-weight: 50">QST</span>
                  <span>云端网盘</span>
                </div>
              <div class="user_login_head_font_right">
                 <div>云端首页</div>
                <div>App下载</div>
                <div>联系我们</div>
              </div>
            </el-col>

           <el-card  class="user_login_head_form" >

             <el-row class="user_login_head_form_font" >账号密码登录</el-row>
           <el-form
               ref="ruleFormRef"
               label-width="auto"
               :model="userInfo"
               :rules="rules"
               style="max-width: 600px"
           >

             <el-form-item  prop="username">
               <el-input  v-model="userInfo.username" placeholder="账号/邮箱/用户名" />
             </el-form-item>
             <el-form-item  prop="password" >
               <el-input type="password" v-model="userInfo.password"   placeholder="密码" show-password/>
             </el-form-item>

             <el-form-item>
               <el-checkbox>
                 <el-text type="info">记住密码</el-text>
                </el-checkbox>
               <el-link  style="margin-left: 30px" type="primary" @click="router.push('/user_register')">未有账户去注册</el-link>

             </el-form-item>

             <el-form-item>
              <el-button type="primary" style="width: 100%" @click="userLogin(ruleFormRef)">登录</el-button>


             </el-form-item>


           </el-form>
          <el-col class="user_login_head_form_img">
            <el-image src="001.png"  fit="fill"/>
            <el-image src="002.png"  fit="fill"/>
            <el-image src="003.png"  fit="fill"/>
            <el-image src="004.png"  fit="fill"/>
          </el-col>
           </el-card>
       </div>




  </div>
</template>

<style scoped lang="less">

.user_login{

  .user_login_head{
    height: 100vh;
    width: 100vw;
    background-image: url("../assets/login.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    font-size: 20px;
    .user_login_head_font{
      position: absolute;
      top: 15px;
      left: 20px;
      display: flex;
      font-family: 华文楷体;
      color: white;
      font-size: 25px;
      flex-flow: row;
      display: flex;
      justify-content: space-around;
      .user_login_head_font_right{
         margin-left: 800px;
        display: flex;
       justify-content: space-between;
        div{
          margin-left: 30px;
        }



      }
    }
    .user_login_head_form{
         position: absolute;
         background-color: aliceblue;
         top:170px;
         left: 1050px;
         height: 330px;
         width: 300px;
      .user_login_head_form_img{
        .el-image{
          margin-right: 17px;
             width: 46px;
              height: 46px;
        }

      }
      .user_login_head_form_font{
         font-size: 20px;
         display: flex;
         justify-content: center;
         font-family: 华文楷体;
         margin-top: 10px;
         margin-bottom: 20px;
      }


    }

  }


}
</style>